<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>球员列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/iconfont.css">
    <link rel="stylesheet" href="../lib/layui/css/layui.css" media="all">

    <link rel="stylesheet" href="../css/xadmin.css">
    <script src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <script src="../js/base.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        tr td,
        tr th {
            text-align: center !important;
            border: none !important;
        }

        .layui-laydate-content tr td {
            border-bottom: none !important;
            border-top: none !important;
        }

        tr td {
            border-bottom: 1px solid #eee !important;
            border-top: 1px solid #eee !important;
        }

        .shaixuan .layui-col-md12 .layui-inline {
            margin: 0;
        }

        .shaixuan .layui-col-md12 .layui-inline.layui-col-md3 .layui-form-label {
            width: 30%;
            padding-left: 0;
        }

        .shaixuan .layui-col-md12 .layui-inline.layui-col-md3 .layui-input-inline {
            width: 53%;
        }

        .rotate {

            transform-origin: center center;

            transform: rotate(180deg);

            -webkit-transform: rotate(180deg);

            -moz-transform: rotate(180deg);

            -ms-transform: rotate(180deg);

            -o-transform: rotate(180deg);

            transition: transform 0.2s;
            -moz-transition: -moz-transform 0.2s;

            -moz-transition: -moz-transform 0.2s;

            -o-transition: -o-transform 0.2s;

            -ms-transition: -ms-transform 0.2s;

        }

        .rotate1 {

            transform-origin: center center;

            transform: rotate(0deg);
            -webkit-transform: rotate(0deg);

            -moz-transform: rotate(deg);

            -ms-transform: rotate(0deg);

            -o-transform: rotate(0deg);

            transition: transform 0.2s;

            -moz-transition: -moz-transform 0.2s;

            -moz-transition: -moz-transform 0.2s;

            -o-transition: -o-transform 0.2s;

            -ms-transition: -ms-transform 0.2s;

        }
    </style>
</head>

<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card" style="display: flex;justify-content: space-between;">
                <div class="layui-card-body ">
                    <blockquote class="layui-elem-quote" style="border:0;font-size: 18px;color: #000;">球员列表
                    </blockquote>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <!-- <div class="layui-card-header">数据统计</div> -->
                <div class="layui-fluid">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md12">
                            <div class="layui-card-body " style="display: flex;justify-content:space-between">
                                <form class="layui-form" action="">
                                    <div class="layui-inline layui-show-xs-block">
                                        <input id="name" class="layui-input" type="text" placeholder="请输入球员姓名">
                                    </div>
                                    <div class="layui-inline layui-show-xs-block">
                                        <button class="layui-btn search" data-type="reload"
                                                lay-filter="add">搜索
                                        </button>
                                        <i style="position: relative;font-size: 18px;left: 15px;top: 5px;cursor: pointer;display: inline-block;"
                                           class="layui-icon layui-icon-down rotate1"></i>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12 shaixuan" style="display: none;">
            <div class="layui-card">
                <!-- <div class="layui-card-header">数据统计</div> -->
                <div class="layui-fluid">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md12">
                            <div class="layui-card-body " style="display: flex;justify-content:space-between">
                                <form class="layui-form" action="" style="width: 100%;">
                                    <div class="layui-form-item layui-col-md12">
                                        <div class="layui-inline layui-col-md3">
                                            <label class="layui-form-label">民族：</label>
                                            <div class="layui-input-inline">
                                                <input id="nation" type="text" name="nation" lay-verify="required"
                                                       autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline layui-col-md3">
                                            <label class="layui-form-label">所属球队：</label>
                                            <div class="layui-input-inline">
                                                <select id="teamId" name="teamId"
                                                        lay-verify="required" lay-search>
                                                    <option value="">全部</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="layui-inline layui-col-md3">
                                            <label class="layui-form-label">年份：</label>
                                            <div class="layui-input-inline">
                                                <input type="text" name="year" id="year" lay-verify="year"
                                                       autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline layui-col-md3">
                                            <label class="layui-form-label">创建时间：</label>
                                            <div class="layui-input-inline">
                                                <input type="text" name="addTime" id="addTime" lay-verify="addTime"
                                                       autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline layui-col-md3">
                                            <label class="layui-form-label">身高：</label>
                                            <div class="layui-input-inline">
                                                <input id="height" type="text" name="height" lay-verify="required"
                                                       autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline layui-col-md3">
                                            <label class="layui-form-label">体重：</label>
                                            <div class="layui-input-inline">
                                                <input type="text" id="weight" name="weight" lay-verify="required"
                                                       autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline layui-col-md3">
                                            <label class="layui-form-label">血型：</label>
                                            <div class="layui-input-inline">
                                                <select id="bloodType" name="bloodType" lay-verify="required">
                                                    <option value="">全部</option>
                                                    <option value="1">A</option>
                                                    <option value="2">B</option>
                                                    <option value="3">AB</option>
                                                    <option value="4">O</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="layui-inline layui-col-md3">
                                            <label class="layui-form-label">证书编号：</label>
                                            <div class="layui-input-inline">
                                                <input type="text" id="credentialNo" name="credentialNo"
                                                       lay-verify="required"
                                                       autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-card-body layui-table-body layui-table-main">

            <!-- 表格部分开始 -->
            <table id="application_table" lay-filter="test" lay-data="{id: 'testReload'}"></table>
            <script type="text/html" id="barDemo">
                <!--<a lay-event="detail" class="btn_a layui-btn layui-btn-primary layui-btn-xs">查看</a>-->
                <a lay-event="watch" class="btn_a layui-btn layui-btn-xs">查看</a>
                <a lay-event="edit" class="btn_a layui-btn layui-btn-xs">修改</a>
                <a lay-event="changeLevel" class="btn_a layui-btn layui-btn-xs">更改等级</a>
            </script>
            <!-- 表格结束 -->
        </div>
    </div>
</div>
</div>
</body>

</html>

<script>
    layui.use(['table', 'laydate'], function () {
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;

        var cityList = ["济南市", "青岛市", "聊城市", "德州市", "东营市", "淄博市", "潍坊市", "烟台市", "威海市", "日照市", "临沂市", "枣庄市",
            "济宁市", "泰安市", "滨州市", "菏泽市"
        ]
        for (var i = 0; i < cityList.length; i++) {
            $("#city").append(
                "<option value=\"" + cityList[i] + "\">" + cityList[i] + "</option>"
            )
        }

        var index = layer.load(1); //添加laoding,0-2两种方式

        laydate.render({ // 初始化时间选择器
            elem: '#year',
            type: 'year'
        });
        laydate.render({ // 初始化时间选择器
            elem: '#addTime',
        });

        //获取球队列表
        $.ajax({
            url: playerGetTeamList,
            type: "POST",
            // 设置的是请求参数
            data: {},
            // 用于设置响应体的类型 注意 跟 data 参数没关系！！！
            dataType: 'json',
            success: function (res) {
                for (var i = 0; i < res.teamList.length; i++) {
                    $("#teamId").append(
                        "<option value=\"" + res.teamList[i].id + "\">" + res
                            .teamList[i].name + "</option>"
                    )
                }
                form.render('select'); //刷新select选择框渲染
            }
        })


        //第一个实例


        table.render({

            elem: '#application_table', //指定原始表格元素选择器（推荐id选择器）
            // height: 600,
            toolbar: true,
            defaultToolbar: ['exports', {
                title: '提示' //标题
                ,
                layEvent: 'LAYTABLE_TIPS' //事件名，用于 toolbar 事件中使用
                ,
                icon: 'layui-icon-tips' //图标类名
            }],
            width: "100%",
            // 附加参数，post token
            // where: { 'token': token },
            loading: true,
            method: 'get',
            url: getPlayerPage, //数据接口
            page: true, //开启分页
            // toolbar: 'default', //开启工具栏，此处显示默认图标
            limit: 10,
            limits: [10, 20, 30, 50, 100, 500, 1000, 5000, 10000],
            cols: [
                [ //表头
                    // {
                    //     type: 'checkbox',
                    //     fixed: 'left'
                    // },
                    {
                        field: 'id',
                        title: '用户ID',
                        width: 100
                    },
                    {
                        field: 'name',
                        title: '姓名',
                        width: 100
                    },
                    {
                        field: 'sex',
                        title: '性别',
                        width: 100,
                        templet: function (d) {
                            if (d.sex == "1") {
                                return "男"
                            } else if (d.sex == "2") {
                                return "女"
                            } else {
                                return ""
                            }
                        }
                    },
                    {
                        field: 'bloodType',
                        title: '血型',
                        width: 70,
                        templet: function (d) {
                            if (d.bloodType == "1") {
                                return "A"
                            } else if (d.bloodType == "2") {
                                return "B"
                            } else if (d.bloodType == "3") {
                                return "AB"
                            } else if (d.bloodType == "4") {
                                return "O"
                            } else {
                                return ""
                            }
                        }
                    },
                    {
                        field: 'nation',
                        title: '民族',
                        width: 100
                    },
                    {
                        field: 'year',
                        title: '年份',
                        width: 100
                    },
                    {
                        field: 'city',
                        title: '市级',
                        width: 100
                    },
                    {
                        field: 'teamName',
                        title: '所属球队',
                        width: 150
                    },
                    {
                        field: 'weight',
                        title: '体重',
                        width: 100
                    },
                    {
                        field: 'height',
                        title: '身高',
                        width: 100
                    },
                    {
                        field: 'level',
                        title: '等级',
                        width: 100,
                        templet: function (d) {
                            if (d.level) {
                                return d.level + "级";
                            } else {
                                return "";
                            }
                        }
                    },
                    {
                        field: 'credentialNo',
                        title: '证书编号',
                        width: 100
                    },
                    {
                        field: 'headPhoto',
                        title: '头像',
                        width: 150,
                        templet: function (d) {
                            if (d.headPhoto == null) {
                                return "-"
                            } else {
                                return "<div onclick='show_img(this)' ><img style='width: 32px;height: 32px;' src='" +
                                    d.headPhoto + "'></div>'"
                            }
                        }
                    },
                    {
                        field: 'addTime',
                        title: '创建时间',
                        width: 150,
                        templet: function (d) {
                            if (d.addTime == null) {
                                return "-"
                            } else {
                                return d.addTime
                            }
                        }
                    },
                    {
                        fixed: 'right',
                        title: "操作",
                        width: 250,
                        align: 'center',
                        toolbar: '#barDemo'
                    }
                ]
            ],
            id: 'testReload',
            done: function (res) {
                if (res.msg == "2") {
                    parent.window.location.href = getRequestPrefix() + "/footBallAdmin/login.html"
                }
                layer.close(index)
            }
        });

        // table.on('checkbox(test)', function (obj) {
        //     console.log(obj)
        // });
        var checkStatus = table.checkStatus('testReload'); //idTest 即为基础参数 id 对应的值
        $("span").on("click", function () {
            checkStatus
            console.log(checkStatus) //获取选中行数量，可作为是否有选中行的条件
            console.log(checkStatus.isAll) //表格是否全选
        })

        //下拉框
        $(".layui-icon.layui-icon-down").on("click", function () {
            $(".shaixuan").stop(true, false);
            if ($(this).hasClass("rotate") && !$(this).hasClass("rotate1")) {
                $(this).removeClass("rotate").addClass("rotate1");
                $(".shaixuan").slideUp()
            } else if ($(this).hasClass("rotate1") && !$(this).hasClass("rotate")) {
                $(this).removeClass("rotate1").addClass("rotate");
                $(".shaixuan").slideDown()
            }
        })
        //头部输入框筛选功能
        var active = {

            reload: function () {
                var year = $('#year');
                var teamId = $('#teamId');
                var height = $('#height');
                var weight = $('#weight');
                var nation = $('#nation');
                var bloodType = $("#bloodType");
                var addTime = $("#addTime");
                var name = $("#name");
                // 执行重载（重新加载数据表格）
                table
                    .reload('testReload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        },
                        where: {
                            year: year.val(),
                            teamId: teamId.val(),
                            height: height.val(),
                            weight: weight.val(),
                            nation: nation.val(),
                            bloodType: bloodType.val(),
                            addTime: addTime.val(),
                            name: name.val(),
                            credentialNo: $("#credentialNo").val()
                        }
                    }, 'data');
            }
        };


        //给查询添加点击事件
        $('.search').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
            //一定要阻止表单的默认行为（刷新）
            return false
        });


        //监听点击的按钮，获取行信息
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            //获得当前行数据
            var $ = layui.$
            var data = obj.data,
                layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === "watch") {
                // layer.msg('审批');
                layer.open({
                    content: "look_player_info.html",
                    type: 2, //打开的窗口的类型
                    area: ["100%", "100%"],
                    title: "查看信息",
                    // btn: ['确认', '取消'],//开启显示按钮功能
                    // btnAlign: 'c',//居中显示按钮
                    // shade:true,
                    shadeClose: true,
                    success: function (layero, index) {
                        // console.log(data)//获取点击行的数据,获取打开的iframe
                        var body = layer.getChildFrame('body', index);
                        var iframe = window['layui-layer-iframe' + index];
                        //调用子页面的全局函数
                        iframe.child(data.id)
                    }
                })
            }
            if (layEvent === "changeLevel") {
                // layer.msg('审批');
                layer.open({
                    content: "change_player_level.html",
                    type: 2, //打开的窗px口的类型
                    area: ["400px", "400px"],
                    title: "修改等级",
                    // btn: ['确认', '取消'],//开启显示按钮功能
                    // btnAlign: 'c',//居中显示按钮
                    // shade:true,
                    shadeClose: false,
                    success: function (layero, index) {
                        // console.log(data)//获取点击行的数据,获取打开的iframe
                        var body = layer.getChildFrame('body', index);
                        var iframe = window['layui-layer-iframe' + index];
                        //调用子页面的全局函数
                        body.find("#name").val(data.name)
                        body.find("#ID").val(data.id)
                        body.find("#level").val(data.level)
                        iframe.child()
                    }
                })
            }
            if (layEvent === "edit") {
                // layer.msg('审批');
                layer.open({
                    content: "edit_player_info.html",
                    type: 2, //打开的窗口的类型
                    area: ["100%", "100%"],
                    title: "修改信息",
                    // btn: ['确认', '取消'],//开启显示按钮功能
                    // btnAlign: 'c',//居中显示按钮
                    // shade:true,
                    shadeClose: true,
                    success: function (layero, index) {
                        // console.log(data)//获取点击行的数据,获取打开的iframe
                        var body = layer.getChildFrame('body', index);
                        var iframe = window['layui-layer-iframe' + index];
                        //调用子页面的全局函数
                        iframe.child(data.id)
                    }
                })
            }
        });


    });

    function show_img(t) { //放大图片
        var t = $(t).find("img");
        //页面层
        layer.open({
            type: 1,
            skin: 'layui-layer-rim', //加上边框
            area: ['300px', '343px'], //宽高
            shadeClose: true, //开启遮罩关闭
            end: function (index, layero) {
                return false;
            },
            content: '<div style="text-align:center;width:100%;height: 100%;overflow: hidden"><img src="' + $(t)
                .attr('src') + '" style="width:100%;height: 100%;display: block;margin: 0 auto;"/></div>'
        });
    }
</script>